<template>
 <div class="yingmoo-expert">
    <ym-header></ym-header>
    <ym-medianav></ym-medianav>
    <ym-detailsnav></ym-detailsnav>
    <div class="images">
      <img src="../assets/ym-expert/images.png" />
    </div>
<!--  鹰目专家  -->
    <div class="expert">
      <div class="big-box">
        <div class="small-box">
          <h6>专家咨询</h6>
        </div>
      </div>
      <img v-for="data in dataList" :src="data.expertImg" />
    </div>
<!--  专家案例  -->
   <a href=""></a>
    <div class="expert-model">
      <div class="models">
        <img width="236px" height="296px" :src="expert1.expertImg" />
        <div class="model">
          <p class="p">{{expert1.expertJobs}}</p>
          <p class="p">{{expert1.expertName}}</p>
          <p class="p">专 长：<span>{{expert1.expertExperience}}</span></p>
          <p class="p">咨 询 量：<span>*</span></p>
          <div class="line">
            <p><img src="../assets/ym-expert/qq.png" /><span>{{expert1.expertQq}}</span></p>
            <p><img src="../assets/ym-expert/tel.png" /><span>{{expert1.expertTel}}</span></p>
          </div>
        </div>
        <div class="button">
          <div class="expert_btn"> 立即咨询</div>
        </div>
      </div>
      <div class="experts-case">
        <div class="case" v-for="c in expert1.caseList">
          <img width="285px" height="187px" :src="c.logo" />
          <p>{{c.customername}}</p>
        </div>
      </div>
    </div>
<!--  图片分界  -->
    <div class="advertising">
      <img src="../assets/ym-expert/advertising.png" />
    </div>
<!--  专家案例  -->
    <div class="expert-model">
      <div class="models">
        <img width="236px" height="296px" :src="expert2.expertImg" />
        <div class="model">
          <p class="p">{{expert2.expertJobs}}</p>
          <p class="p">{{expert2.expertName}}</p>
          <p class="p">专 长：<span>{{expert2.expertExperience}}</span></p>
          <p class="p">咨 询 量：<span>*</span></p>
          <div class="line">
            <p><img src="../assets/ym-expert/qq.png" /><span>{{expert2.expertQq}}</span></p>
            <p><img src="../assets/ym-expert/tel.png" /><span>{{expert2.expertTel}}</span></p>
          </div>
        </div>
        <div class="button">
          <div class="expert_btn"> 立即咨询</div>
        </div>
      </div>
      <div class="experts-case">
        <div class="case" v-for="c in expert2.caseList">
          <img width="285px" height="187px" :src="c.logo" />
          <p>{{c.customername}}</p>
        </div>
      </div>
    </div>
<!--  图片分界  -->
    <div class="advertising">
      <img src="../assets/ym-expert/advertising.png" />
    </div>
<!--  专家案例  -->
    <div class="expert-model">
      <div class="models">
        <img width="236px" height="296px" :src="expert3.expertImg" />
        <div class="model">
          <p class="p">{{expert3.expertJobs}}</p>
          <p class="p">{{expert3.expertName}}</p>
          <p class="p">专 长：<span>{{expert3.expertExperience}}</span></p>
          <p class="p">咨 询 量：<span>*</span></p>
          <div class="line">
            <p><img src="../assets/ym-expert/qq.png" /><span>{{expert3.expertQq}}</span></p>
            <p><img src="../assets/ym-expert/tel.png" /><span>{{expert3.expertTel}}</span></p>
          </div>
        </div>
        <div class="button">
          <div class="expert_btn"> 立即咨询</div>
        </div>
      </div>
      <div class="experts-case">
        <div class="case" v-for="c in expert3.caseList">
          <img width="285px" height="187px" :src="c.logo" />
          <p>{{c.customername}}</p>
        </div>
      </div>
    </div>
<!--  图片分界  -->
    <div class="advertising">
      <img src="../assets/ym-expert/advertising.png" />
    </div>
<!--  专家案例  -->
    <div class="expert-model">
      <div class="models">
        <img width="236px" height="296px" :src="expert4.expertImg" />
        <div class="model">
          <p class="p">{{expert4.expertJobs}}</p>
          <p class="p">{{expert4.expertName}}</p>
          <p class="p">专 长：<span>{{expert4.expertExperience}}</span></p>
          <p class="p">咨 询 量：<span>*</span></p>
          <div class="line">
            <p><img src="../assets/ym-expert/qq.png" /><span>{{expert4.expertQq}}</span></p>
            <p><img src="../assets/ym-expert/tel.png" /><span>{{expert4.expertTel}}</span></p>
          </div>
        </div>
        <div class="button">
          <div class="expert_btn"> 立即咨询</div>
        </div>
      </div>
      <div class="experts-case">
        <div class="case" v-for="c in expert4.caseList">
          <img width="285px" height="187px" :src="c.logo" />
          <p>{{c.customername}}</p>
        </div>
      </div>
    </div>
    <!--  图片分界  -->
    <div class="advertising">
      <img src="../assets/ym-expert/advertising.png" />
    </div>
<!--  专家案例  -->
    <div class="expert-model">
      <div class="models">
        <img width="236px" height="296px" :src="expert5.expertImg" />
        <div class="model">
          <p class="p">{{expert5.expertJobs}}</p>
          <p class="p">{{expert5.expertName}}</p>
          <p class="p">专 长：<span>{{expert5.expertExperience}}</span></p>
          <p class="p">咨 询 量：<span>*</span></p>
          <div class="line">
            <p><img src="../assets/ym-expert/qq.png" /><span>{{expert5.expertQq}}</span></p>
            <p><img src="../assets/ym-expert/tel.png" /><span>{{expert5.expertTel}}</span></p>
          </div>
        </div>
        <div class="button">
          <div class="expert_btn"> 立即咨询</div>
        </div>
      </div>
      <div class="experts-case">
        <div class="case" v-for="c in expert5.caseList">
          <img width="285px" height="187px" :src="c.logo" />
          <p>{{c.customername}}</p>
        </div>
      </div>
    </div>
    <ym-detailsfooter></ym-detailsfooter>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
  import ymDetailsnav from "@/components/ymDetailsnav.vue";
  export default {
    name: "yingmoo-expert",
    components: {
      ymHeader,
      ymMedianav,
      ymDetailsnav,
      ymDetailsfooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        banners: [{
          imgUrl: require('@/assets/ym-case/case-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-media/feature-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-case/case-lunbo.png')
        }],
        dataList:[],
        expert1:{},
        expert2:{},
        expert3:{},
        expert4:{},
        expert5:{},
        template: [{
          templatename: '案例标题案例标题案例标题'
        }, {
          templatename: '案例标题案例标题案例标题'
        }, {
          templatename: '案例标题案例标题案例标题'
        }, {
          templatename: '案例标题案例标题案例标题'
        }]
      }
    },
    mounted(){
    	this.getExpertInfo();
    },
    methods:{
    	getExpertInfo:function(){
    		this.$http.get(this.requestAddr+"/GetJson/getExpertInfo",{emulateJSON:true}).then(
    			(res)=>{
    				console.log(res.data);
    				this.dataList = res.data.result;
    				this.expert1 = res.data.result[0];
    				this.expert2 = res.data.result[1];
    				this.expert3 = res.data.result[2];
    				this.expert4 = res.data.result[3];
    				this.expert5 = res.data.result[4];
    				
    			},(error)=>{
    				
    			}
    			
    		)
    	}
    }
  }
</script>

<style scoped lang="less">
  .yingmoo-expert {
    background-color: #f3f9ff;
    .images {
      img {
        width: 100%;
      }
    }
    .expert {
      width: 1200px;
      height: 296px;
      margin: 0 auto;
      background-color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .big-box {
        width: 100px;
        height: 260px;
        border: 3px solid #052439;
        .small-box {
          width: 84px;
          height: 228px;
          border: 1px solid #052439;
          margin: 16px auto;
          h6 {
            font-size: 45px;
            font-weight: 600px;
            text-align: center;
            line-height: 54px;
            color: #052439;
          }
        }
      }
      img {
        height: 214px;
      }
    }
    .expert-model {
      width: 1200px;
      height: 296;
      margin: 0 auto;
      background-color: white;
      margin-top: 20px;
      .models {
        display: flex;
        .model {
          margin-left: 30px;
          padding-top: 30px;
          .p {
            font-size: 22px;
            color: #666666;
            line-height: 50px;
            &:nth-child(1) {
              font-size: 30px;
              color: #333333;
              font-weight: bold;
            }
            &:nth-child(3) {
              font-weight: bold;
              span {
                font-weight: 100;
              }
            }
            &:nth-child(4) {
              font-weight: bold;
              span {
                font-weight: 100;
              }
            }
          }
          .line {
            display: flex;
            img {
              position: relative;
              top: 5px;
            }
            p {
              font-size: 18px;
              color: #052439;
              font-weight: bold;
              span {
                padding-left: 10px;
              }
              &:nth-child(2) {
                padding-left: 50px;
              }
            }
          }
        }
        .button {
          width: 280px;
          height: 80px;
          border: 3px solid #052439;
          margin: auto auto;
          .expert_btn {
            width: 260px;
            height: 66px;
            background-color: #052439;
            margin: 8px auto;
            font-size: 45px;
            font-weight: 600px;
            text-align: center;
            line-height: 66px;
            color: white;
          }
        }
      }
      .experts-case{
        width: 1200px;
        height: 260px;
        display: flex;
        justify-content: space-between;
        .case{
          width: 285px;
          padding-top: 20px;
          p{
            font-size: 16px;
            color: #333333;
            text-align: center;
            line-height: 46px; 
          }
        }
      }
    }
    .advertising{
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
    }
  }

</style>
